<template>
  <div class="new-phon-top">
    <img :src="
        $fnc.getImgUrl(pageObj.background + '?' + new Date().getTime() || '')
      " alt="" style="width:100%;position: absolute;z-index: 0;" :style="{
        background: !pageObj.background ? '#f4f4f4' : '',
        height: pageObj.is_search == 0 ? '155px' : '200px'
      }" crossOrigin="anonymous" />
    <div v-if="pageObj.is_search == 0"></div>
    <div class="new-phone-top-search" v-else-if="headericon.style == 0 || headericon.style == ''">
      <div class="new-phone-top-search-left" v-if="JSON.stringify(leftIcon) != '{}'" style="margin-right:10px">
        <van-icon :name="leftIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ leftIcon.title }}</span>
      </div>
      <div class="new-phone-top-search-middle">
        <el-input v-model="search_input" size="small" placeholder prefix-icon="el-icon-search"></el-input>
      </div>
      <div class="new-phone-top-search-right" v-if="JSON.stringify(rightIcon) != '{}'" style="margin-left:10px">
        <van-icon :name="rightIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ rightIcon.title }}</span>
      </div>
    </div>
    <div class="new-phone-top-search" v-else-if="headericon.style == 1">
      <div class="new-phone-top-search-left" v-if="JSON.stringify(leftIcon) != '{}'" style="margin-right:10px">
        <van-icon :name="leftIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ leftIcon.title }}</span>
      </div>
      <div class="new-phone-top-search-right" v-if="JSON.stringify(rightIcon) != '{}'" style="margin-right:10px">
        <van-icon :name="rightIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ rightIcon.title }}</span>
      </div>
      <div class="new-phone-top-search-middle">
        <el-input v-model="search_input" size="small" placeholder prefix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div class="new-phone-top-search" v-else-if="headericon.style == 2">
      <div class="new-phone-top-search-middle">
        <el-input v-model="search_input" size="small" placeholder prefix-icon="el-icon-search"></el-input>
      </div>
      <div class="new-phone-top-search-left" v-if="JSON.stringify(leftIcon) != '{}'" style="margin-left:10px">
        <van-icon :name="leftIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ leftIcon.title }}</span>
      </div>
      <div class="new-phone-top-search-right" v-if="JSON.stringify(rightIcon) != '{}'" style="margin-left:10px">
        <van-icon :name="rightIcon.piclink || ''" :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-i1'
              : 'new-phone-top-search-i2'
          ]" />
        <span :class="[
            headericon.banner && headericon.banner.length == 0
              ? 'new-phone-top-search-span1'
              : 'new-phone-top-search-span2'
          ]">{{ rightIcon.title }}</span>
      </div>
    </div>
    <div class="new-phone-top-search" v-else-if="headericon.style == 3" style="flex-wrap:wrap">
      <div class="nowaddress">
        <div class="addresssearch">
          <i class=" el-icon-position "></i>地址定位信息
        </div>
        <div class="new-phone-top-search-left" v-if="JSON.stringify(leftIcon) != '{}'" style="margin-left:10px">
          <van-icon :name="leftIcon.piclink || ''" :class="[
              headericon.banner && headericon.banner.length == 0
                ? 'new-phone-top-search-i1'
                : 'new-phone-top-search-i2'
            ]" />
        </div>
        <div class="new-phone-top-search-right" v-if="JSON.stringify(rightIcon) != '{}'" style="margin-left:10px">
          <van-icon :name="rightIcon.piclink || ''" :class="[
              headericon.banner && headericon.banner.length == 0
                ? 'new-phone-top-search-i1'
                : 'new-phone-top-search-i2'
            ]" />
        </div>
      </div>
      <div class="new-phone-top-search-middle">
        <el-input v-model="search_input" size="small" placeholder prefix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div class="new-phone-top-word" v-if="pageObj.is_show_cate == 1">
      <div>
        <div>
          <span v-if="searchList[0]">{{ searchList[0].title }}</span>
          <span v-if="searchList[1]">{{ searchList[1].title }}</span>
          <span v-if="searchList[2]">{{ searchList[2].title }}</span>
          <span v-if="searchList[3]">{{ searchList[3].title }}</span>
          <span v-if="searchList[4]">{{ searchList[4].title }}</span>
        </div>
      </div>
    </div>
    <div class="new-phone-top-address" v-if="isShowAddress">
      <div>
        <div>
          <i class="el-icon-location"></i>
          当前位置
        </div>
        <div><i class="el-icon-full-screen"></i>扫码</div>
        <div><i class="el-icon-s-grid"></i>取货</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      search_input: "",
      searchList: [
        { title: "男装女装" },
        { title: "生活办公" },
        { title: "家用电器" },
        { title: "科技数码" },
        { title: "家庭保健" },
        { title: "汽车生活" },
      ],
    };
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      headericon: (state) => state.modulePage.data.headericon,
    }),
    leftIcon() {
      try {
        if (this.headericon.banner[0]) {
          return this.headericon.banner[0];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
    rightIcon() {
      try {
        if (this.headericon.banner[1]) {
          return this.headericon.banner[1];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
    isShowAddress() {
      if (this.pageObj.tuanzhang == "1") {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.new-phon-top {
  width: 100%;
  height: 200px;
  position: relative;
  cursor: pointer;
  .new-phone-top-search {
    width: 94%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 6;
    padding-top: 10px;

    .new-phone-top-search-left,
    .new-phone-top-search-right {
      width: auto;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      min-height: 32px;

      > span {
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.9);
      }
      .new-phone-top-search-i1 {
        font-size: 22px;
        color: #000000;
        z-index: 10;
      }
      .new-phone-top-search-i2 {
        font-size: 22px;
        color: #ffffff;
        z-index: 10;
        // width: 30px;
      }
      .new-phone-top-search-span1 {
        color: #000000;
        z-index: 10;
      }
      .new-phone-top-search-span2 {
        color: #ffffff;
        z-index: 10;
      }
    }
    .new-phone-top-search-middle {
      width: 100%;
      flex: 1;
    }
  }
  .new-phone-top-word {
    width: 90%;
    margin: 0 auto;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 10px 0;
    > div {
      width: 100%;
      height: 20px;
      position: relative;
      overflow: hidden;
      > div {
        width: 200%;
        height: 20px;
        position: absolute;
        left: 0;
        overflow-y: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > span {
          font-size: 12px;
          color: #fff;
          padding: 3px 12px;
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 10px;
          z-index: 6;
          margin-right: 5px;
        }
      }
    }
  }
  .new-phone-top-address {
    width: 95%;
    height: 20px;
    margin: 0 auto;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    position: relative;
    > div {
      width: 100%;
      position: absolute;
      left: 0;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      > div {
        // width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;
        i {
          margin-right: 5px;
          font-size: 18px;
          z-index: 9;
        }
      }
      > div:nth-of-type(1) {
        margin-right: auto;
      }
      > div:nth-of-type(3) {
        margin-left: 15px;
      }
    }
  }
  .addresssearch {
    font-size: 12px;
    height: 25px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    line-height: 25px;
    // border: 1px solid #fff;
    border-radius: 25px;
    padding: 0 5px;
    > i {
      font-size: 18px;
    }
  }
  .nowaddress {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    z-index: 10;
  }
}
</style>
